<template>
  <ele-modal class="el-model-class"
             :show-close="false"
             width="800px"
             :visible="visible"
             :append-to-body="true"
             :close-on-click-modal="true"
             custom-class="ele-dialog-form"
             @close="updateVisible(false)">
    <iframe width="100%"
            style="height: 60vh; width: 100%; border: none"
            :src="map_src"></iframe>
    <template slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button @click="handleSureMap"
                 type="primary">确定</el-button>
    </template>
  </ele-modal>
</template>
  
  <script>
export default {
  name: 'position',
  data () {
    return {
      visible: false,

      //修改11
      map_src:
        'https://mapapi.qq.com/web/mapComponents/locationPicker/v/index.html?search=1&type=1&key=D4FBZ-TGQ6J-I2HFZ-FVHIT-VLIH7-Z6BZS&referer=location',
      form: {
        //省市区ID
        id_area: [0, 0, 0],
        address: '',
        lng: '',
        lat: ''
      },
      map_data: {
        url: 'https://mapapi.qq.com/web/mapComponents/locationPicker/v/index.html?search=1&type=1&key=这里放你使用的key&referer=location',
        address: '',
        lng: '',
        lat: ''
      }
    };
  },
  created () {
    let that = this;
    window.addEventListener(
      'message',
      function (event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        var loc = event.data;
        console.log(loc);
        if (loc && loc.module == 'locationPicker') {
          //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
          that.map_data.address = loc.poiaddress;
          that.map_data.lat = loc.latlng.lat;
          that.map_data.lng = loc.latlng.lng;
          that.$emit('chooseMapPoint', that.map_data);
        } else {
          that.$emit('chooseMapPoint', '选择数据为空');
        }
      },
      false
    );
  },
  methods: {
    //地图选点确定
    handleSureMap () {
      console.log('this.map_data', this.map_data);
      this.$emit('sure', this.map_data);
      this.updateVisible(false);
    },
    // 取消
    handleCancelMap () {
      this.$emit('cancel');
    },
    // 数据回显
    dataReturn () {


    },
    show: function (loc = '') {
      if (loc) {

        this.$nextTick(() => {
          this.map_data.address = loc?.address;
          this.map_data.lat = loc?.longitude;
          this.map_data.lng = loc?.latitude;
        })
      }

      console.log('进入位置show=======');
      this.visible = true;
    },
    /* 更新 visible */
    updateVisible (value) {
      this.visible = value;
      this.isSuccess = false;
      this.isError = false;
      this.codeImg = '';
    }
  }
};
  </script>
  
  <style scoped></style>
  